<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基本标签</title>
</head>
<body>
    普通内容：事实证明，标题只只支持1~6级，不支持第七级
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <h7>7级标题</h7>
    <p>p标签用于标记段落。被p标签标记的内容将自动占满整个父空间的宽度，若父空间的宽度太多而段落的内容较少则多余的宽度显示空白，不会被后面的其他内容填充；若父空间的宽度不多但内容太多的话，内部的内容会自动换行。其中，英文是遇到空格才会换行（不会将一个单词拦腰截断），中文是达到宽度就换行。被p标签标记的内容独占一行。独占一行的意思是：被p标签标记的段落不会和其他内容在同一个高度显示：既不会和前一个标签的内容同行显示，也不会和后一个标签的内容同行显示。因为p标签的自动占满一行的特性，使得很多时候为了自适应窗口宽度可以直接使用p标签标记内容即可。</p>
    一般来说，使用p标签进行段落标记比较好，<br>但有时候也可以用br标签进行强制换行
    <hr>
    有时候为了使得内容分割更明确一些，使用hr标签可以绘画出一条水平线

    有时候为了给文字加一些特殊的特征，比如：
    <br>
    <b>b标签加粗</b>
    <strong>strong标签加粗</strong>
    <br>
    <u>u标签下划线</u>
    <ins>ins标签下划线</ins>
    <br>
    <i>i标签倾斜</i>
    <em>em标签倾斜</em>
    <br>
    <s>s标签删除线</s>
    <del>del标签删除线</del>
    图片标签
    <br>
    <img 
    src="./images/image1.jpeg" 
    alt="一张手机壁纸的图片" 
    title="一张手机壁纸的图片" 
    width="70%"
    >

    <br>
    通过绝对路径可以定位到图片，比如来自网络中的图片：
    <br>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F16%2F20160316193347_MhQ35.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632905013&t=b39a448fcd7fb3ab7daea4336ccb1e82" alt="一张引用自网络的图片" title="一张引用自网络的图片" width="90%">

    <br>
    媒体标签audio
    <br>
    <audio 
    src="./audio/共青团中央 - 五四特别版错位时空.mp3" 
    controls="controls" loop></audio>

    <br>
    视频标签video
    <br>
    <video src="./video/输出_1.mp4" width="90%" controls></video>
    <br>
    连接标签a，通过target标记_self还是_blank，通过设置href为#，实现空链接
    <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
    <a href="#">通过#设置的空链接点击可以回到页面顶部</a>

    <p>无序列表：</p>
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
        <li>无序列表项3</li>
        <li>无序列表项4</li>
        <li>无序列表项5</li>
    </ul>
    <p>有序列表：</p>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
        <li>有序列表项3</li>
        <li>有序列表项4</li>
        <li>有序列表项5</li>
    </ol>
    <p>自定义列表</p>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
    <h3>表格</h3>
    <table border="1" style="width: 100%; height: 300px;">
        <caption><strong>表格标题</strong></caption>
        <thead>
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">一班</td>
                <td>张三</td>
                <td>99</td>
                <td>优</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>80</td>
                <td>良</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总评</td>
                <td colspan="3">两人总分179分，总体：良</td>
            </tr>
        </tfoot>
    </table>

    <h2>表单</h2>
    <form action="#">
        昵称：<input type="text" placeholder="请输入昵称" value="独怜" name="nickname">
        <br>
        密码：<input type="password" name="" id="" placeholder="请输入密码">
        <br>
        性别：<input type="radio" name="sex" id="" checked>男<input type="radio" name="sex" id="">女
        <br>
        爱好：<input type="checkbox" name="hobby" id="" checked>下象棋<input type="checkbox" name="hobby" id="" checked>下围棋<input type="checkbox" name="hobby" id="">下五子棋
        <br>
        <input type="file" name="file" id="" multiple>
        <br>
        <input type="submit" value="提交" >
        <input type="reset" value="重置" >
        <input type="button" value="普通按钮" >
    </form>

    <form action="#">
        昵称：<input type="text">
        <button type="submit">button提交按钮</button>
        <button type="reset">button重置按钮</button>
        <button type="button">button普通按钮</button>
        <button type="menu">button菜单按钮</button>
    </form>
    
    <h1>下拉菜单</h1>
    下拉菜单：
    <select name="selectCity" id="">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3" selected>广州</option>
        <option value="4">深圳</option>
    </select>

    <h1>文本域标签</h1>
    <textarea name="textarea" id="" cols="5" rows="3"></textarea>

    <h1>Label标签：设定Label绑定到input上</h1>
    <input type="checkbox" name="" id="checkbox">
    <label for="checkbox">下象棋</label>

    <label>
        <input type="checkbox" name="" id="">下围棋
    </label>

    <h1>语义化标签</h1>
    <p>为了学习语义化标签，得先学习没有语义的布局标签，然后再学习有语义的标签</p>
    <ul>
        <li>
            语义化标签
            <ol>
                <li>
                    没有语义的布局标签
                    <ol>
                        <li>div标签：一行只显示一个（独占一行）</li>
                        <li>span标签：一行可以显示多个</li>
                    </ol>
                </li>
                <li>
                    有语义的布局标签（都是独占一行，排除掉他们的语义的话，他们和div是一样的）
                    <ol>
                        <li>haeder: 网页头部</li>
                        <li>nav: 网页导航</li>
                        <li>footer: 网页底部</li>
                        <li>aside: 网页侧边栏</li>
                        <li>section: 网页区块</li>
                        <li>article: 网页文章</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ul>

    <h1>div标签</h1>
    <p>可以发现，连续放三个div他们彼此各自占一行。</p>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>

    <h1>span标签</h1>
    <p>可以发现，连续放三个span他们彼此在同一行，而且在他们后面放其他行级标签的话，也会继续和他们在同一行。</p>
    <span>我是span1</span>
    <span>我是span3</span>
    <span>我是span2</span>
    <input type="text" value="后续的行级标签">

    <h1>有语义的标签</h1>
    <a href="./有语义的标签.html">
        为了展示有语义标签的效果，所以将其另起一个网页，点击进入查看有语义标签的显示效果
    </a>

    <h1>字符实体</h1>
    <strong>空格合并现象：</strong>
    <p>空格合并现象是指，在html代码中，同时出现的多个连续的空格、换行、缩进等，最终在浏览器中的显示效果只会被解析出一个空格出来，效果如下：</p>
    <p>以下两个文本段中间被键入了三个空格，但是在网页里只能看见一个！</p>
    文本段1   文本段2

    <p>以下两个文本段中间被键入了三个换行，但是在网页里只能看见一个空格！</p>
    文本段1
    
    
    文本段2

    <p>以下两个文本段中间被键入了三个缩进，但是在网页里只能看见一个空格！</p>
    文本段1         文本段2
    <strong><p>可以发现：若希望在网页中显示多个连续空格，直接在代码中连续键入多个空格是无效的。为了能够实现网页渲染之后可以看到多个连续空格的情况，我们需要使用空格的“字符实体”——&amp;nbsp;</p></strong>
    <p>以下两个文本段中被键入了三个&amp;nbsp;，可以发现此时两个文本在网页渲染的最终效果里确实呈现出了三个空格出来了</p>
    文本段1&nbsp;&nbsp;&nbsp;文本段2
    <strong><p>因为某些字符被html所使用，当我们希望呈现这些字符时，若直接键入这些字符的话，浏览器会将这些字符按照其在html的标准中呈现出其html的效果出来，使得我们无法直接显示这些字符。为了能够显示出这些字符的本来面貌，html中使用字符实体来进行呈现，常见的字符实体有：</p></strong>
    <ul>
        <li>空格：&amp;nbsp;</li>
        <li>大于：&amp;lt;</li>
        <li>小于：&amp;gt;</li>
        <li>和号：&amp;amp;</li>
        <li>引号：&amp;quot;</li>
        <li>版权：&amp;copy;</li>
    </ul>
</body>
</html>